/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form, Input, Radio, Select, Switch, Button, Tooltip, Icon, Checkbox, InputNumber} from 'antd';
import request from '@/utils/request';
import {connect} from 'dva';
import styles from './index.less'
import {convertCurrency} from '@/utils/utils';

const FormItem = Form.Item;
const {TextArea} = Input;

const RadioGroup = Radio.Group;
const Option = Select.Option;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      level: 0,
      invoices: [{
        detail: [{hsbz: true, taxrate: '0'}, {hsbz: true, taxrate: '0'}, {hsbz: true, taxrate: '0'}, {
          hsbz: true,
          taxrate: '0'
        }, {hsbz: true, taxrate: '0'}, {hsbz: true, taxrate: '0'}, {hsbz: true, taxrate: '0'}, {
          hsbz: true,
          taxrate: '0'
        },]
      }],
      detail: {},
      mc: '',
      nsrsbr: '',
      dzdh: '',
      khh: '',
      sjhm: '',
      yxdz: '',
      yhzh: '',
      bz: '',
      bz1: '',
      bz2: '',
      mc2: '吐鲁番天源水务有限公司',
      nsrsbh2: '91650402MABXHAWE5W',
      dhdz2: '吐鲁番市高昌路83号0995-8531942',
      khh2: '建设银行吐鲁番分行营业部65050168603800001506',
      invoicing_type: '',
      mode: '2',
      step: 1
    };
  }

  onChangeState = (tyle, e) => {
    this.setState({
      [tyle]: e.target.value
    })
  }

  componentDidMount() {
    const that = this;
    // this.fetchDetail()

  }

  getPreView = () => {
    const that = this;
    that.setState({
      step: 2
    })
    return
    request(`/paper_invoices/preview`, {
      method: 'GET',
      params: {
        payment_id: this.props.editRecord.id,
        invoicing_type: this.state.invoicing_type
      }
    }).then((response) => {
      console.log('response', response)
      if (response.status === 200) {
        for (let i = 0; i < response.data.data.length; i++) {
          let restLength = 8 - response.data.data[i].detail.length;
          if (that.state.invoicing_type === 3) {
            restLength = 4 - response.data.data[i].detail.length;

          }
          for (let j = 0; j < restLength; j++) {
            response.data.data[i].detail.push({})
          }

        }

        that.setState({
          invoices: response.data.data,
          dhdz2: '' + response.data.data[0].saleaddress + response.data.data[0].salephone,
          khh2: response.data.data[0].saleaccount,
          step: 2
        })


      }
    })
  }
  //获取基本信息
  fetchDetail = () => {
    const that = this;
    request(`/accounts/${this.props.editRecord.account.id}`, {
      method: 'GET',
      params: {},
    }).then((response) => {
      console.log('fetchDetail', response)
      if (response.status === 200) {
        that.setState({
          detail: response.data.data,
          mc: response.data.data.name,
          nsrsbr: response.data.data.buyer_tax_number,
          dzdh: response.data.data.address,
          khh: response.data.data.buyer_bank_account,
          sjhm: response.data.data.invoice_push_mobile,
          yxdz: response.data.data.invoice_push_email,
        })
      }


    });
  };
  onChangeItemState = (index, name, e) => {
    this.state.invoices[0].detail[index][name] = e.target.value;
    this.setState({
      invoices: this.state.invoices
    })
  }
  onChangeItemStateNumber = (index, name, e) => {
    console.log('name',name)
    let invoices_item = this.state.invoices[0].detail[index]
    if (name === 'hsbz') {
      invoices_item[name] = e.target.checked;
    } else {
      invoices_item[name] = e;
    }


    if (invoices_item.hsbz) {
      //含税
      if (name === 'hsbz' || name === 'taxrate') {
        if (invoices_item.item_total && invoices_item.taxrate) { //有含税金额和税率，计算不含税金额
          if (invoices_item.num) {//有数量计算不含税单价
            invoices_item.price = invoices_item.item_total / invoices_item.num
          }

        }
      } else {
        if ((name === 'num' || name === 'price') && invoices_item.num * invoices_item.price) { //有数量和单价计算金额
          invoices_item.item_total = (invoices_item.num * invoices_item.price).toFixed(8);
          invoices_item.item_total = Math.round(invoices_item.item_total * 100) / 100
        } else if ((name === 'item_total') && invoices_item.price && invoices_item.item_total) {//有金额和单价计算数量
          invoices_item.num = (invoices_item.item_total / invoices_item.price).toFixed(8);
        } else if ((name === 'item_total') && invoices_item.num && invoices_item.item_total) {//有金额和数量计算单价
          invoices_item.price = (invoices_item.item_total / invoices_item.num).toFixed(8);
        }
      }

      if (invoices_item.item_total && invoices_item.taxrate) {//有金额和税率计算税额
        console.log('有金额和税率计算税额')
        invoices_item.itemTaxrate = Math.round((invoices_item.item_total * (Number(invoices_item.taxrate) / (1 + Number(invoices_item.taxrate)))) * 100) / 100
        invoices_item.no_item_total = Math.round((Number(invoices_item.item_total) - Number(invoices_item.itemTaxrate)) * 100) / 100;
      }
    } else {
      //不含税
      if (name === 'hsbz' || name === 'taxrate') {
        console.log('改变含税标志或税率')
        if (invoices_item.item_total && invoices_item.taxrate) { //有含税金额和税率，计算不含税金额
          console.log('含税金额', invoices_item.item_total)
          invoices_item.itemTaxrate = Math.round((invoices_item.item_total * (Number(invoices_item.taxrate) / (1 + Number(invoices_item.taxrate)))) * 100) / 100
          invoices_item.no_item_total = Math.round((Number(invoices_item.item_total) - Number(invoices_item.itemTaxrate)) * 100) / 100;
          if (invoices_item.num) {//有数量计算不含税单价
            invoices_item.no_price = invoices_item.no_item_total / invoices_item.num
          }

        }
      } else {
        if ((name === 'num' || name === 'no_price') && invoices_item.num * invoices_item.no_price) { //有数量和单价计算金额
          console.log(1)
          invoices_item.no_item_total = (invoices_item.num * invoices_item.no_price).toFixed(8);
          invoices_item.no_item_total = Math.round(invoices_item.no_item_total * 100) / 100
        } else if ((name === 'no_item_total') && invoices_item.no_price && invoices_item.no_item_total) {//有金额和单价计算数量
          console.log(2)
          invoices_item.num = (invoices_item.no_item_total / invoices_item.no_price).toFixed(8);
        } else if ((name === 'no_item_total') && invoices_item.num && invoices_item.no_item_total) {//有金额和数量计算单价
          console.log(3)
          invoices_item.no_price = (invoices_item.no_item_total / invoices_item.num).toFixed(8);
        }
        if (invoices_item.no_item_total && invoices_item.taxrate) {//有金额和税率计算税额
          console.log(3)
          invoices_item.itemTaxrate = Math.round((invoices_item.no_item_total * (Number(invoices_item.taxrate))) * 100) / 100;
          invoices_item.item_total = invoices_item.no_item_total + invoices_item.itemTaxrate
        }

      }

    }

    this.setState({
      invoices: JSON.parse(JSON.stringify([...this.state.invoices]))
    })


    return


    if (name !== 'hsbz') {
      if (invoices_item.hsbz) {
        if (name === 'taxrate' && invoices_item.item_total) {
          invoices_item.itemTaxrate = Math.round((invoices_item.item_total * (Number(e) / (1 + Number(e)))) * 100) / 100
        } else if (invoices_item.taxrate && invoices_item.item_total) {
          invoices_item.itemTaxrate = Math.round((invoices_item.item_total * (Number(invoices_item.taxrate) / (1 + Number(invoices_item.taxrate)))) * 100) / 100
        }
      } else {
        if (name === 'taxrate' && invoices_item.item_total) {
          invoices_item.itemTaxrate = Math.round((invoices_item.item_total * (Number(e))) * 100) / 100
        } else if (invoices_item.taxrate && invoices_item.item_total) {
          invoices_item.itemTaxrate = Math.round((invoices_item.item_total * (Number(invoices_item.taxrate))) * 100) / 100
        }
      }
    }

    if (name === 'hsbz' && invoices_item.item_total && invoices_item.hsbz && invoices_item.taxrate) {
      invoices_item.item_total = Number(invoices_item.item_total) + Number(invoices_item.itemTaxrate);
    } else if (name === 'hsbz' && invoices_item.item_total && !invoices_item.hsbz && invoices_item.taxrate) {
      invoices_item.item_total = Number(invoices_item.item_total) - Number(invoices_item.itemTaxrate);
    }


    this.setState({
      invoices: this.state.invoices
    })
  }
  renderInvoicesItem = (invoices_item) => {
    // console.log('invoices_item', invoices_item)
    return invoices_item.detail.map((item, index) => {
      // console.log('item.hsbz', item.hsbz)
      return <tr key={index} style={{height: '20px'}}>
        <td><Checkbox checked={item.hsbz} value={item.hsbz} onChange={(e) => {
          this.onChangeItemStateNumber(index, 'hsbz', e)
        }}></Checkbox></td>
        <td style={{position: 'relative'}}><Input style={{padding: '0 8px', height: '25px'}} defaultValue={''}
                                                  value={item.goodsname} onChange={(e) => {
          this.onChangeItemState(index, 'goodsname', e)
        }} className={styles.invoice_item_input}/>
          {/*    <Tooltip title="选择用水性质">
            <Icon  style={{position:'absolute',right:'0',top:"0",padding:"4px",cursor:'pointer'}} type="dash" />
          </Tooltip> */}
        </td>
        <td><Input style={{padding: '0 8px', height: '25px', width: '100%', borderBottom: '0'}} defaultValue={''}
                   value={item.spec} onChange={(e) => {
          this.onChangeItemState(index, 'spec', e)
        }} className={styles.invoice_item_input}/></td>
        <td><Input style={{padding: '0 8px', height: '25px', width: '100%', borderBottom: '0'}} defaultValue={''}
                   value={item.unit} onChange={(e) => {
          this.onChangeItemState(index, 'unit', e)
        }} className={styles.invoice_item_input}/></td>
        <td><InputNumber min={0}
                         style={{height: '25px', width: '100%', borderBottom: '0', position: 'relative', top: '-1px'}}
                         defaultValue={''} value={item.num} onChange={(e) => {
          this.onChangeItemStateNumber(index, 'num', e)
        }} className={styles.invoice_item_input}/></td>
        <td><InputNumber min={0} s
                         style={{height: '25px', width: '100%', borderBottom: '0', position: 'relative', top: '-1px'}}
                         defaultValue={''}
                         value={item[item.hsbz ? 'price' : 'no_price']} onChange={(e) => {
          this.onChangeItemStateNumber(index, item.hsbz ? 'price' : 'no_price', e)
        }} className={styles.invoice_item_input}/></td>
        <td><InputNumber min={0} s
                         style={{height: '25px', width: '100%', borderBottom: '0', position: 'relative', top: '-1px'}}
                         defaultValue={''}
                         value={item[item.hsbz ? 'item_total' : 'no_item_total']} onChange={(e) => {
          this.onChangeItemStateNumber(index, item.hsbz ? 'item_total' : 'no_item_total', e)
        }} className={styles.invoice_item_input}/></td>
        <td><Select value={item.taxrate} style={{width: '100%'}} onChange={(e) => {
          this.onChangeItemStateNumber(index, 'taxrate', e)
        }}>
          <Option value="0">免税</Option>
          <Option value="0.01">1%</Option>
          <Option value="0.015">1.5%</Option>
          <Option value="0.03">3%</Option>
          <Option value="0.04">4%</Option>
          <Option value="0.05">5%</Option>
          <Option value="0.06">6%</Option>
          <Option value="0.09">9%</Option>
          <Option value="0.10">10%</Option>
          <Option value="0.11">11%</Option>
          <Option value="0.13">13%</Option>
          <Option value="0.16">16%</Option>
          <Option value="0.17">17%</Option>
        </Select></td>
        <td>{item.itemTaxrate}</td>
      </tr>
    })
  }
  renderInvoicesTable = () => {
    const invoicing_type = this.state.invoicing_type;
    const invoices = this.state.invoices;
    // console.log('invoices', invoices)
    const {getFieldDecorator, getFieldValue} = this.props.form;
    return invoices.map((item, index) => {
      let bhtaxtotal = 0;
      let taxtotal = 0;
      let alltotal = 0;
      for (let i = 0; i < item.detail.length; i++) {
        if (item.detail[i].hsbz && item.detail[i].item_total) {
          bhtaxtotal += Number(item.detail[i].item_total)
        } else if (!item.detail[i].hsbz && item.detail[i].no_item_total) {
          bhtaxtotal += Number(item.detail[i].no_item_total)
        }
        if (item.detail[i].itemTaxrate) {
          taxtotal += Number(item.detail[i].itemTaxrate)
        }
        if (item.detail[i].hsbz && item.detail[i].item_total) {
          alltotal += Number(item.detail[i].item_total)
        } else if (!item.detail[i].hsbz && item.detail[i].item_total) {
          alltotal += Number(item.detail[i].no_item_total)
          alltotal += Number(item.detail[i].itemTaxrate)
        }
      }
      return <div key={index} style={{position: 'relative'}}>
        <p style={{position: 'absolute', top: '20px', left: '0px', cursor: 'pointer', color: 'blue'}} onClick={() => {
          this.setState({
            step: 1
          })
        }}>《 返回选择发票类型</p>
        <h3 style={{
          textAlign: 'center',
          marginBottom: '16px',
          fontSize: '32px',
          color: (index === 1 || invoicing_type === 4 || invoicing_type === 7) ? '#ff7400' : '#1950a5',
          fontWeight: 'bold'
        }}>
          {invoicing_type === 1 && '普通发票(电子)'}
          {invoicing_type === 2 && '普通发票(纸质)'}
          {invoicing_type === 4 && '专用发票(纸质)'}
          {invoicing_type === 3 && index === 0 && '专用发票(纸质)'}
          {invoicing_type === 3 && index === 1 && '普通发票(纸质)'}
          {invoicing_type === 6 && '电子发票（普通发票）'}
          {invoicing_type === 7 && '电子发票（增值税专用发票）'}
        </h3>
        <div style={{textAlign: 'center', position: 'relative', top: '-12px'}}>
          <Form layout={"inline"}>
            <Form.Item label="所属分站"
            >
              {getFieldDecorator('company_id', {
                initialValue: ''
              })(
                <Select style={{width:'200px'}}   placeholder="请选择">
                  {
                    JSON.parse(sessionStorage.getItem('management_companies')).map((item,index)=>{
                      return <Option key={index} value={item.id}>
                        {item.name}
                      </Option>
                    })
                  }
                </Select>,
              )}
            </Form.Item>
            <Form.Item label="发票类型"
            >
              <Select value={this.state.mode} style={{width: '160px'}} onChange={(e) => {
                this.setState({
                  mode: e
                })
              }
              }>
                {
                  [{id: '2', value: '卡表收费'},
                    {id: '3', value: '处罚收费'}, {id: '4', value: '水车收费'}, {id: '5', value: '补交水费'}, {id: '6', value: '预交收费'}
                  ].map((item, index) => {
                    return <Option key={index} value={item.id}>{item.value}</Option>;
                  })
                }
              </Select>
            </Form.Item>
          </Form>
        </div>

        {
          (invoicing_type === 6 || invoicing_type === 7) ?
            <Form onSubmit={this.handleSubmit}>
              <table
                className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 7) ? styles.invoice_make_orange : ''}`}
                style={{width: '100%'}}>
                {
                  <tbody>
                  <tr>
                    <th
                      className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 7) ? styles.invoice_make_orange : ''}`}
                      style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>购买方信息
                    </th>
                    <td style={{width: "50%"}}>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`} style={{width:'214px'}}>名 <span
                          style={{marginLeft: '52px'}}>称</span> :</label>
                        <span className={styles.invoice_item_input_wrap} style={{marginLeft:'-214px',paddingLeft:'214px'}}>
                      <Input defaultValue={''} value={this.state.mc} onChange={(e) => {
                        this.onChangeState('mc', e)
                      }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}  style={{width:'214px'}}>统⼀社会信用代码/纳税⼈识别号
                          :</label>
                        <span className={styles.invoice_item_input_wrap} style={{marginLeft:'-214px',paddingLeft:'214px'}}>
                       <Input defaultValue={''} value={this.state.nsrsbr} onChange={(e) => {
                         this.onChangeState('nsrsbr', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}  style={{width:'214px'}}>地址
                          :</label>
                        <span className={styles.invoice_item_input_wrap}  style={{marginLeft:'-214px',paddingLeft:'214px'}}>
                       <Input defaultValue={''} value={this.state.dzdh} onChange={(e) => {
                         this.onChangeState('dzdh', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}   style={{width:'214px'}}>手机号码
                          :</label>
                        <span className={styles.invoice_item_input_wrap} style={{marginLeft:'-214px',paddingLeft:'214px'}}>
                        <Input defaultValue={''} value={this.state.sjhm} onChange={(e) => {
                          this.onChangeState('sjhm', e)
                        }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}  style={{width:'214px'}}>开户行及帐号
                          :</label>
                        <span className={styles.invoice_item_input_wrap} style={{marginLeft:'-214px',paddingLeft:'214px'}}>
                       <Input defaultValue={''} value={this.state.khh} onChange={(e) => {
                         this.onChangeState('khh', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                      </div>

                    </td>
                    <th
                      className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 7) ? styles.invoice_make_orange : ''}`}
                      style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>销售方信息
                    </th>
                    <td style={{width: "50%"}}>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}  style={{width:'214px'}}>名 <span
                          style={{marginLeft: '52px'}}>称</span> :</label>
                        <span className={styles.invoice_item_input_wrap} style={{marginLeft:'-214px',paddingLeft:'214px'}}>
                      <Input disabled={true} defaultValue={this.state.mc2}
                             value={this.state.mc2} onChange={(e) => {
                        this.onChangeState('mc2', e)
                      }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}  style={{width:'214px'}}>统⼀社会信用代码/纳税⼈识别号
                          :</label>
                        <span className={styles.invoice_item_input_wrap} style={{marginLeft:'-214px',paddingLeft:'214px'}}>
                       <Input disabled={true} defaultValue={this.state.nsrsbh2}
                              value={this.state.nsrsbh2} onChange={(e) => {
                         this.onChangeState('nsrsbh2', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                    </td>
                  </tr>
                  </tbody>}

              </table>
              <table
                className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 7) ? styles.invoice_make_orange : ''}
           ${styles.invoice_list} ${(index === 1 || invoicing_type === 7) ? styles.invoice_list2 : ''} invoice_table`}
                style={{
                  width: '100%',
                  borderBottom: '0', borderTop: '0', textAlign: 'center'
                }}>
                <thead>
                <tr>
                  <th style={{width: '80px'}}>是否含税</th>
                  <th style={{width: '250px'}}>*简称*货物或应税劳务、服务名称</th>
                  <th style={{width: '130px'}}>规格型号</th>
                  <th style={{width: '80px'}}>单位</th>
                  <th style={{width: '100px'}}>数量</th>
                  <th style={{width: '120px'}}>单价</th>
                  <th style={{width: '130px'}}>金额</th>
                  <th style={{width: '80px'}}>税率</th>
                  <th>税额</th>
                </tr>
                </thead>
                <tbody>
                {this.renderInvoicesItem(item)}
                <tr style={{
                  height: '23px',
                  borderBottom: `2px solid ${(index === 1 || invoicing_type === 7) ? '#ff7400' : '#1950a5'}`
                }}>
                  <td></td>
                  <td>合计</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>￥{Math.round(bhtaxtotal * 1000000) / 1000000}</td>
                  <td></td>
                  <td>￥{Math.round((taxtotal) * 1000000) / 1000000}</td>
                </tr>
                <tr style={{height: '23px'}}>
                  <td></td>
                  <td>价税合计(大写)</td>
                  <td colSpan="7"><span style={{
                    float: 'left',
                    marginLeft: '10px'
                  }}>{convertCurrency(Math.round((alltotal) * 100) / 100)}</span>
                    <span style={{
                      float: 'right',
                      marginRight: '150px'
                    }}>(小写)￥{Math.round((alltotal) * 100) / 100}</span></td>
                </tr>
                </tbody>
                <tbody>
                </tbody>

              </table>

              <table
                className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 7) ? styles.invoice_make_orange : ''} `}
                style={{width: '100%'}}>
                {
                  <tbody>
                  <tr>

                    <th
                      className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 7) ? styles.invoice_make_orange : ''}`}
                      style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>备注
                    </th>
                    <td style={{width: "100%", verticalAlign: 'top'}}>
                      {

                        <TextArea defaultValue={''} value={this.state.bz} onChange={(e) => {
                          this.onChangeState('bz', e)
                        }} className={styles.invoice_item_input} autoSize={{minRows: 6, maxRows: 6}}/>
                      }

                    </td>
                  </tr>
                  </tbody>}

              </table>
              <table style={{width: '100%', marginTop: '10px'}}>
                <tbody>
                <tr>
                  <td style={{paddingLeft: '10px'}}> 收 款 人 : 努斯热提·赛提瓦力地</td>
                  <td> 复 核 : 吾斯曼江·吾买尔</td>
                  <td> 开 票 人 : {sessionStorage.getItem('username')}</td>
                  <td> 销 售 方 : (章)</td>
                </tr>
                </tbody>
              </table>

            </Form>
            : <Form onSubmit={this.handleSubmit}>
              <table
                className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                style={{width: '100%'}}>
                {
                  <tbody>
                  <tr>
                    <th
                      className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                      style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>购买方
                    </th>
                    <td style={{width: "50%"}}>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>名 <span
                          style={{marginLeft: '52px'}}>称</span> :</label>
                        <span className={styles.invoice_item_input_wrap}>
                      <Input defaultValue={''} value={this.state.mc} onChange={(e) => {
                        this.onChangeState('mc', e)
                      }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>纳税人识别号
                          :</label>
                        <span className={styles.invoice_item_input_wrap}>
                       <Input defaultValue={''} value={this.state.nsrsbr} onChange={(e) => {
                         this.onChangeState('nsrsbr', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>地址、 <span
                          style={{marginLeft: '10px'}}>电话</span> :</label>
                        <span className={styles.invoice_item_input_wrap}>
                       <Input defaultValue={''} value={this.state.dzdh} onChange={(e) => {
                         this.onChangeState('dzdh', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>开户行及帐号
                          :</label>
                        <span className={styles.invoice_item_input_wrap}>
                       <Input defaultValue={''} value={this.state.khh} onChange={(e) => {
                         this.onChangeState('khh', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                    </td>
                    <th
                      className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                      style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>通知到
                    </th>
                    <td style={{width: "50%", verticalAlign: 'top'}}>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>手机号码
                          :</label>
                        <span className={styles.invoice_item_input_wrap}>
                        <Input defaultValue={''} value={this.state.sjhm} onChange={(e) => {
                          this.onChangeState('sjhm', e)
                        }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>邮箱地址
                          :</label>
                        <span className={styles.invoice_item_input_wrap}>
                        <Input defaultValue={''} value={this.state.yxdz} onChange={(e) => {
                          this.onChangeState('yxdz', e)
                        }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                    </td>
                  </tr>
                  </tbody>}

              </table>
              <table
                className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}
           ${styles.invoice_list} ${(index === 1 || invoicing_type === 4) ? styles.invoice_list2 : ''} invoice_table`}
                style={{
                  width: '100%',
                  borderBottom: '0', borderTop: '0', textAlign: 'center'
                }}>
                <thead>
                <tr>
                  <th style={{width: '80px'}}>是否含税</th>
                  <th style={{width: '250px'}}>*简称*货物或应税劳务、服务名称</th>
                  <th style={{width: '130px'}}>规格型号</th>
                  <th style={{width: '80px'}}>单位</th>
                  <th style={{width: '100px'}}>数量</th>
                  <th style={{width: '120px'}}>单价</th>
                  <th style={{width: '130px'}}>金额</th>
                  <th style={{width: '80px'}}>税率</th>
                  <th>税额</th>
                </tr>
                </thead>
                <tbody>
                {this.renderInvoicesItem(item)}
                <tr style={{
                  height: '23px',
                  borderBottom: `2px solid ${(index === 1 || invoicing_type === 4) ? '#ff7400' : '#1950a5'}`
                }}>
                  <td></td>
                  <td>合计</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>￥{Math.round(bhtaxtotal * 100) / 100}</td>
                  <td></td>
                  <td>￥{Math.round((taxtotal.toFixed(2)) * 100) / 100}</td>
                </tr>
                <tr style={{height: '23px'}}>
                  <td></td>
                  <td>价税合计(大写)</td>
                  <td colSpan="7"><span style={{
                    float: 'left',
                    marginLeft: '10px'
                  }}>{convertCurrency(Math.round((alltotal) * 100) / 100)}</span>
                    <span style={{
                      float: 'right',
                      marginRight: '50px'
                    }}>(小写)￥{Math.round((alltotal) * 100) / 100}</span></td>
                </tr>
                </tbody>
                <tbody>
                </tbody>

              </table>

              <table
                className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''} `}
                style={{width: '100%'}}>
                {
                  <tbody>
                  <tr>
                    <th
                      className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                      style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>销售方
                    </th>
                    <td style={{width: "50%"}}>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>名 <span
                          style={{marginLeft: '52px'}}>称</span> :</label>
                        <span className={styles.invoice_item_input_wrap}>
                      <Input disabled={true} defaultValue={this.state.mc2}
                             value={this.state.mc2} onChange={(e) => {
                        this.onChangeState('mc2', e)
                      }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>纳税人识别号
                          :</label>
                        <span className={styles.invoice_item_input_wrap}>
                       <Input disabled={true} defaultValue={this.state.nsrsbh2}
                              value={this.state.nsrsbh2} onChange={(e) => {
                         this.onChangeState('nsrsbh2', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>地址、 <span
                          style={{marginLeft: '10px'}}>电话</span> :</label>
                        <span className={styles.invoice_item_input_wrap}>
                       <Input disabled={true} defaultValue={this.state.dhdz2}
                              value={this.state.dhdz2} onChange={(e) => {
                         this.onChangeState('dhdz2', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                      <div className={styles.invoice_item}>
                        <label
                          className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>开户行及帐号
                          :</label>
                        <span className={styles.invoice_item_input_wrap}>
                       <Input disabled={true} defaultValue={item.saleaccount} value={this.state.khh2}
                              onChange={(e) => {
                                this.onChangeState('khh2', e)
                              }} className={styles.invoice_item_input}/>
                    </span>
                      </div>
                    </td>
                    <th
                      className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                      style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>备注
                    </th>
                    <td style={{width: "50%", verticalAlign: 'top'}}>
                      {
                        invoicing_type !== 3 &&
                        <TextArea defaultValue={''} value={this.state.bz} onChange={(e) => {
                          this.onChangeState('bz', e)
                        }} className={styles.invoice_item_input} autoSize={{minRows: 6, maxRows: 6}}/>
                      }
                      {
                        invoicing_type === 3 && index === 0 &&
                        <TextArea defaultValue={''} value={this.state.bz1} onChange={(e) => {
                          this.onChangeState('bz1', e)
                        }} className={styles.invoice_item_input} autoSize={{minRows: 6, maxRows: 6}}/>
                      }
                      {
                        invoicing_type === 3 && index === 1 &&
                        <TextArea defaultValue={''} value={this.state.bz2} onChange={(e) => {
                          this.onChangeState('bz2', e)
                        }} className={styles.invoice_item_input} autoSize={{minRows: 6, maxRows: 6}}/>
                      }
                    </td>
                  </tr>
                  </tbody>}

              </table>
              <table style={{width: '100%', marginTop: '10px'}}>
                <tbody>
                <tr>
                  <td style={{paddingLeft: '10px'}}> 收 款 人 : 努斯热提·赛提瓦力地</td>
                  <td> 复 核 : 吾斯曼江·吾买尔</td>
                  <td> 开 票 人 : {sessionStorage.getItem('username')}</td>
                  <td> 销 售 方 : (章)</td>
                </tr>
                </tbody>
              </table>

            </Form>

        }

      </div>
    })
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const editRecord = this.props.editRecord;

    return (
      <div style={{fontSize: "13px"}}>
        {
          this.state.step === 1 &&
          <div>
            <div style={{width: '440px', margin: '50px auto', textAlign: 'center'}}>
              {/*<div onClick={() => {
                this.setState({invoicing_type: 1}, function () {
                  this.getPreView()
                })
              }} style={{
                width: '250px',
                height: '60px',
                lineHeight: '60px',
                cursor: 'pointer',
                margin: '10px',
                display: 'inline-block',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '5px',
                background: '#0a82ff',
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '18px'
              }}>电子发票 >
              </div>
              <div onClick={() => {
                this.setState({invoicing_type: 2}, function () {
                  this.getPreView()
                })
              }} style={{
                width: '250px',
                height: '60px',
                lineHeight: '60px',
                cursor: 'pointer',
                margin: '10px',
                display: 'inline-block',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '5px',
                background: '#0060c4',
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '18px'
              }}>纸质发票 >
              </div>
              <div onClick={() => {
                this.setState({invoicing_type: 4}, function () {
                  this.getPreView()
                })
              }} style={{
                width: '250px',
                height: '60px',
                lineHeight: '60px',
                cursor: 'pointer',
                margin: '10px',
                display: 'inline-block',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '5px',
                background: '#ff7400',
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '18px'
              }}>专用发票 >
              </div>*/}
              <div onClick={() => {
                this.setState({invoicing_type: 6}, function () {
                  this.getPreView()
                })
              }} style={{
                width: '250px',
                height: '60px',
                lineHeight: '60px',
                cursor: 'pointer',
                margin: '10px',
                display: 'inline-block',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '5px',
                background: '#0060c4',
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '18px'
              }}>数电普票 >
              </div>
              <div onClick={() => {
                this.setState({invoicing_type: 7}, function () {
                  this.getPreView()
                })
              }} style={{
                width: '250px',
                height: '60px',
                lineHeight: '60px',
                cursor: 'pointer',
                margin: '10px',
                display: 'inline-block',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '5px',
                background: '#ff7400',
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '18px'
              }}>数电专票 >
              </div>
            </div>
          </div>
        }
        {
          this.state.step === 2 && this.renderInvoicesTable()

        }

      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
